<template>
	<view class="withdrawalDetails">
		<n-loading></n-loading>
		<view v-if="withdrawalInfo">
			<view class="top">
				<view class="member">
					<image :src="withdrawalInfo.userInfo.avatar" mode=""></image>
					<view class="text">{{withdrawalInfo.userInfo.nickname}}</view>
				</view>
				<view class="thisTime">
					<view class="tit">本次提现</view>
					<view class="num">{{withdrawalInfo.money}}</view>
				</view>
			</view>
			<view class="textDetails">
				<view class="tit">提现账单</view>
				<view class="num"><text>￥</text>{{withdrawalInfo.money}}</view>
				<view class="states" :class="{states1:withdrawalInfo.status==2}">{{withdrawalInfo.status==2?'已到账':'审核中'}}</view>
			</view>
			<view class="progressBox">
				<u-time-line>
					<u-time-line-item nodeTop="0" v-if="withdrawalInfo.created_at && withdrawalInfo.audit_at && withdrawalInfo.updated_at">
						<template v-slot:node>
							<view class="u-node" v-if="withdrawalInfo.created_at && withdrawalInfo.audit_at && withdrawalInfo.updated_at">
								<view class="dot"></view>
							</view>
						</template>
						<template v-slot:content>
							<view class="progressCont">
								<view class="u-order-desc">
									<view class="desc">已到账微信余额</view>
								</view>
								<view class="u-order-time">{{getdate(withdrawalInfo.updated_at,1)}}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="0" v-if="withdrawalInfo.created_at && withdrawalInfo.audit_at">
						<template v-slot:node>
							<view class="u-node-h" v-if="withdrawalInfo.updated_at"></view>
							<view class="u-node" v-if="withdrawalInfo.created_at && withdrawalInfo.audit_at && withdrawalInfo.updated_at==null">
								<view class="dot"></view>
							</view>
						</template>
						<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
						<template v-slot:content>
							<view class="progressCont">
								<view class="u-order-desc">
									<view class="desc">平台审核成功</view>
								</view>
								<view class="u-order-time">{{getdate(withdrawalInfo.audit_at,1)}}</view>
							</view>
						</template>
					</u-time-line-item>
					<u-time-line-item nodeTop="0" v-if="withdrawalInfo.created_at">
						<template v-slot:node>
							<view class="u-node-h" v-if="withdrawalInfo.audit_at || withdrawalInfo.updated_at"></view>
							<view class="u-node" v-if="withdrawalInfo.created_at && withdrawalInfo.audit_at==null && withdrawalInfo.updated_at==null">
								<view class="dot"></view>
							</view>
						</template>
						<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
						<template v-slot:content>
							<view class="progressCont">
								<view class="u-order-desc">
									<view class="desc">我发起提现，提现审核中</view>
								</view>
								<view class="u-order-time">{{getdate(withdrawalInfo.created_at,1)}}</view>
							</view>
						</template>
					</u-time-line-item>
				</u-time-line>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				withdrawalInfo:null,
			}
		},
		onLoad: function (option) {
			this.getWithdrawal(option.id);
		},
		methods: {
			getWithdrawal(id){
				this.apiget('/fun/member/withdrawal-detail',{id:id}).then(res =>{
					if(res.data.status == 200 ) {
						this.withdrawalInfo = res.data.data;
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.withdrawalDetails{
		padding: 24rpx 32rpx;
	}
	.top{
		margin-bottom: 48rpx;
		background: linear-gradient(96.62deg, #EE4029 3.4%, #F3693D 67.77%);
		box-shadow: 0px 8rpx 16rpx rgba(255, 82, 56, 0.2);
		border-radius: 16rpx;
		
		.member{
			height: 120rpx;
			padding: 0 32rpx;
			display: flex;
			align-items: center;
			font-size: 28rpx;
			color: #fff;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%);
			image{
				width: 56rpx;
				height: 56rpx;
				margin-right: 8rpx;
				border-radius: 50%;
				overflow: hidden;
			}
			
			.text{
				flex: 1;
				width: 1px;
			}
		}
		.thisTime{
			padding: 14rpx 32rpx 36rpx;
			.tit{
				font-size: 24rpx;
				line-height: 24rpx;
				color: rgba(255, 255, 255, 0.7);
			}
			.num{
				font-size: 52rpx;
				line-height: 64rpx;
				color: #FFFFFF;
			}
		}
	}
	.textDetails{
		margin-bottom: 104rpx;
		text-align: center;
		color: #333333;
		.tit{
			font-size: 28rpx;
			line-height: 44rpx;
		}
		.num{
			margin-bottom: 16rpx;
			font-size: 52rpx;
			line-height: 64rpx;
			text{
				font-size: 40rpx;
			}
		}
		.states{
			font-size: 28rpx;
			line-height: 44rpx;
			color: #40A9FF;
		}
		.states1{
			color: #FF5238;
		}
	}
	.progressBox{
		padding-left: 16rpx;
		.u-node-h{
			width: 16rpx;
			height: 16rpx;
			background: #E8E8E8;
			border-radius: 50%;
		}
		.u-node {
			width: 32rpx;
			height: 32rpx;
			padding: 8rpx;
			border-radius: 50%;
			background: rgba(255, 82, 56, 0.12);
			.dot{
				width: 100%;
				height: 100%;
				border-radius: 50%;
				background: #FF5238;
			}
		}
		
		.progressCont{
			padding: 24rpx;
			background: #F8F8FA;
			box-shadow: 0px 8rpx 16rpx rgba(0, 0, 0, 0.04);
			border-radius: 16rpx;
			
			.u-order-desc{
				display: flex;
				align-items: center;
				font-size: 32rpx;
				color: #333333;
				
				image{
					width: 48rpx;
					height: 48rpx;
					border-radius: 50%;
				}
				.desc{
					flex: 1;
					width: 1px;
				}
			}
			
			.u-order-time {
				font-size: 24rpx;
				line-height: 40rpx;
				color: rgb(200, 200, 200);
			}
		}
	}
</style>
